<template>
	<div class="login-carousel-container">
		<template v-if="!['prod.yxpms.com', 'czpms.cyzf.cn'].includes(hostname)">
			<div class="login-carousel-logo">
				<template v-if="isLockinEnv()">
					<img v-show="attrs.shouldShowIcon" src="@/assets/images/login-lockin/logo.png" width="140" />
				</template>
				<template v-else-if="isYuXin()">
					<img src="@/assets/images/login/logo.png" width="80" />
				</template>
			</div>
		</template>
		<a-carousel class="login-carousel" autoplay>
			<img v-for="(img, i) in imgList" :key="i" :src="img" :alt="`轮播图-${i + 1}`" class="login-img" />
		</a-carousel>
	</div>
</template>

<script lang="ts" setup>
	import {isLockinEnv, isYuXin} from '@/utils/common/index'
	import {useAttrs} from 'vue'
	const attrs = useAttrs()

	const {hostname} = location

	const imgList = [
		// 'https://yuxin-pms.oss-cn-beijing.aliyuncs.com/pms/2022-09-06/5284543720214b8998feb305e4b06cdc_o.jpg',
		'https://yuxin-pms.oss-cn-beijing.aliyuncs.com/pms/2022-09-06/abc3fedf5c8d4f98882c832e06671a62_o.jpg',
		'https://yuxin-pms.oss-cn-beijing.aliyuncs.com/pms/2022-09-06/e475d189f0264dcf887887c48d99f38d_o.jpg',
		'https://yuxin-pms.oss-cn-beijing.aliyuncs.com/pms/2022-09-06/6e3ebe6af1394b2fad7742dc5cf873d3_o.jpg'
	]
</script>

<style scoped lang="less">
	.login-carousel-container {
		.login-carousel-logo {
			position: absolute;
			left: 20px;
			top: 20px;
			z-index: 1;
		}

		.login-carousel {
			height: 100%;

			:deep(div) {
				height: 100%;
			}
		}
	}

	.login-img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
</style>
